<template>
  <div id="app" :style="{backgroundImage: 'url(' + background1 + ')'}">
    
    <page1></page1>
    <page2 id="page2"></page2>
    <page3 class="page3"></page3>
    <page4 class="page4"></page4>
    <page5 class="page5"></page5>

  </div>
</template>

<script>
import page1 from './page1.vue'
import page2 from './page2.vue'
import page3 from './page3.vue'
import page4 from './page4.vue'
import page5 from './page5.vue'
export default {
  name: '',
  data() {
    return {
      background1: require("../../assets/bg1.jpg")
    }
  },
  components: {
    page1,
    page2,
    page3,
    page4,
    page5
  }
}

</script>

<style scoped>
  #app {
    width: 100%;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
  }


  #page2 {
    margin: 0 auto;
    width: 100%;
    height: 100vh;
    background-color: #ffffff;
  }

  .page3 {
    margin: 0 auto;
    width: 100%;
    height: 300px;
    background-image: url("../../assets/bg2.jpg");
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-size: 1920px 100%;
    display: flex;
  }

  .page4 {
    margin: 0 auto;
    width: 100%;
    height: 300px;
    background-color: #fff;
  }

  .page5 {
    background-color:#1d1d21;
    height: 44px;
  }
</style>
